<template>
	<view class="signup">
		<view class="" v-if="isShow">
			您尚未签约任何房源!!!
		</view>
		<view v-else class="signup-group" v-for="(item, index) in houseInfoList" :key="index">
			<view class="status">
				已签约
			</view>
			<view class="signup-title">
				<image class="top-image" :src="item.image[0]" mode="scaleToFill" />
			</view>
			<view class="info">
				<view class="info-item">房屋编号：{{ item.number }}</view>
				<view class="info-item">合同开始时间：{{ item.startTime }}</view>
				<view class="info-item">合同结束时间：{{ item.endTime }}</view>
			</view>
			<view class="actions">
				<view class="button-group">
					<view v-for="(button, index) in buttonData" :key="index" class="custom-button" type="primary" hover-class="none">
						<view :class="button.icon" class="icon-item" @tap="goRouter(button.url,item.contractId,item.houseId)" hover-class="none">	
						</view>
						<view class="item-text">
							{{ button.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { getMySignup } from '../../services/signup';
	import { onLoad } from '@dcloudio/uni-app';
	import type { HouseDetailsPage } from '/@/types/global'

	const isShow = ref()

	const houseInfoList = ref<HouseDetailsPage[]>()
	onLoad(
		async () => {
			const res = await getMySignup()
			
			if (res.data.length > 0) {
				houseInfoList.value = res.data
			} else {
				isShow.value = true
			}

		})

	const buttonData = ref([
		{
			name: '续租',
			icon:'icon-renew',
			url: '/pages/contract/LeaseRenewal'
		},
		{
			name: '退租',
			icon:'icon-rent',
			url: '/pages/contract/surrender'
		},
		{
			name: '报修',
			icon:'icon-wuyebaoxiu',
			url: '/pages/repair/repair'
		},
		{
			name: '企业入住',
			icon:'icon-qiye',
			url: '/pages/signup/companySignup'
		},
		{
			name: '合同详情',
			icon:'icon-hetong',
			url: '/pages/contract/contractPDF'
		}
	]);

	const goRouter = (url : string, contractId : string,houseId:string) => {
		uni.navigateTo({
			url: `${url}?contractId=${contractId}&houseId=${houseId}`
		});
	};
</script>

<style scoped>
	.signup {
		padding: 16px;
		background-color: #f9f9f9;
	}

	.signup-group {
		margin-bottom: 16px;
		padding: 16px;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.status {
		font-size: 16px;
		font-weight: bold;
		color: #4CAF50;
		margin-bottom: 8px;
	}

	.signup-title {
		margin-bottom: 12px;
	}

	.top-image {
		width: 100%;
		height: 200px;
		object-fit: cover;
		border-radius: 8px;
	}

	.info {
		margin-bottom: 16px;
	}

	.info-item {
		font-size: 14px;
		color: #333;
		margin-bottom: 8px;
	}

	.actions {
		display: flex;
		justify-content: space-between;
	}

	.button-group {
		display: flex;
		flex-wrap: wrap;
		color: #000000;
	}

	.custom-button:hover {
		background-color: #0056b3;
	}
	.icon-item{
	font-size: 27px;
    padding: 0 8px;
    color: #2cce70;
	}
	.item-text{
		color: #2cce70;
		font-size: 12px;
		text-align: center;
	}
</style>